//css没有逻辑性而且冗余性高
//less 是css的扩展语言

//定义一个粉色的变量
@color: pink;
@font14: 14px;

body {
    background-color: @color;
}

//less 嵌套直接写到父元素里
div {
    background-color: @color;
    font-size: @font14;

    a {
        color: red;

        //伪类选择器
        &:hover {
            color: blue;
        }
    }
}

//less 运算 
//运算符的左右必须加空格
//两个数参与运算  有一个单位就行 (如果单位不同 以第一个单位为准)
//除法和乘法要加括号
@border: 5px + 5;

div {
    width: 200px - 50;
    height: 200px + 30;
    border: @border solid red;
}

img {
    width: (82 / 50rem);
}

//less 的编译------>css文件
//用插件可以保存自动转换 
// 我的转化变成了wxss文件？？？